<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="表格" name="first">
      <el-card class="box-card">
        <el-row>
          <el-col :span="12" :offset="8">
            <my-date-day v-on:query="queryTable"></my-date-day>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="8">
            <el-select
              value-key="item"
              v-model="selValue"
              filterable
              placeholder="请选择"
              
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table :data="tableData" stripe border>
              <el-table-column prop="point" label="时刻点"> </el-table-column>
              <el-table-column prop="plan" label="预测负荷"> </el-table-column>
              <el-table-column prop="real" label="实际负荷"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="曲线图" name="second">
      <my-chart></my-chart>
    </el-tab-pane>
    <el-tab-pane label="多日平均准确率" name="third">
      <my-multi-avg></my-multi-avg>
    </el-tab-pane>
    <el-tab-pane label="平均准确率排名" name="forth">
      <my-avg-rank></my-avg-rank>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import myDateDay from "../../myDateDay";
import myChart from "./fhyc_st_chart";
import myMultiAvg from "./fhyc_st_multiAvg.vue";
import myAvgRank from "./fhyc_st_avgRank.vue";
export default {
  components: {
    myDateDay,
    myChart,
    myMultiAvg,
    myAvgRank,
  },
  data() {
    return {
      activeName: "first",
      // 表格数据
      tableData: [],
      // start: '',
      // end: ''
      options: [
        {
          id: "0000",
          name: "河南电网",
        },
        {
          id: "0001",
          name: "郑州",
        },
        {
          id: "0002",
          name: "安阳",
        },
        {
          id: "0003",
          name: "平顶山",
        },
        {
          id: "0004",
          name: "洛阳",
        },
        {
          id: "0005",
          name: "焦作",
        },
        {
          id: "0006",
          name: "新乡",
        },
        {
          id: "0007",
          name: "三门峡",
        },
        {
          id: "0008",
          name: "开封",
        },
        {
          id: "0009",
          name: "南阳",
        },
        {
          id: "0010",
          name: "漯河",
        },
        {
          id: "0011",
          name: "濮阳",
        },
        {
          id: "0012",
          name: "商丘",
        },
        {
          id: "0013",
          name: "驻马店",
        },
        {
          id: "0014",
          name: "信阳",
        },
        {
          id: "0015",
          name: "许昌",
        },
        {
          id: "0016",
          name: "鹤壁",
        },
        {
          id: "0017",
          name: "周口",
        },
        {
          id: "0018",
          name: "济源",
        },
      ],
      value: "",
      selValue: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(this);
      console.log(tab, event);
    },
    async queryTable(date) {
      let netid = this.selValue;
      console.log(netid);
      const { data: res } = await this.$http.get(
        `/manage1/fhyc/st/vue_fhyc_table?pdate=${date}&netid=${netid}`
      );
      // console.log("date@@@", date);
      this.tableData = res.data;
      console.log(res);
    },
  },
};
</script>

<style scoped>
.el-select {
  margin-top: 10px;
  width: 220px;
}
</style>